"""
@author: 高姚霞
@date: 2020-07-29 10:34:31
"""
<!-- 热点检索页 -->
<template>
  <div class="hotspot-search content-view">
    <div class="hotspot-header">
      <div class="header-title">
        <img src="../../../assets/images/hotspotSearch/hotspot-title.png" alt />
      </div>
      <div class="header-select" style="width: 100px;margin-right:10px;">
        <a-select
          v-model="searchType"
          style="width: 92px;"
          @change="(value) => handleChange('select', value)"
          dropdownClassName="search-select-dropdown"
        >
          <a-icon slot="suffixIcon" type="caret-down" />
          <a-select-option :value="0">
            <span style="textAlign: center">普通</span>
          </a-select-option>
          <a-select-option :value="1" @click="showPopover">
            <span style="textAlign: center">高级</span>
          </a-select-option>
        </a-select>
      </div>
      <div
        class="global-search-wrapper"
        :class="{'focus-search-wrapper': focus, 'open-search-wrapper': open}"
      >
        <!-- 搜索 -->
        <a-input
          v-model.trim="keyword"
          class="input-search"
          placeholder="请输入关键词"
          size="large"
          @change="(e) => inputSearch(e.target.value)"
          @focus="handleFocus"
          @blur="handleBlur"
          @input="searchEvent"
        ></a-input>
        <!-- 下拉框 -->
        <div class="input-select" v-show="open">
          <div style="padding: 0px 12px">
            <a-divider style="marginTop: 0px; marginBottom: 10px; padding: 0px; height: 1px;"></a-divider>
            <span style="color: #1678FD; fontSize: 14px;">搜索建议</span>
            <a-list :data-source="resultList">
              <a-list-item
                class="list-item"
                slot="renderItem"
                slot-scope="item"
                @mousedown="onSelect($event)"
              >
                <span v-html="item.title"></span>
              </a-list-item>
            </a-list>
          </div>
        </div>
      </div>
      <a-button class="search-btn" size="large" type="primary" @click="onSearch()">搜索</a-button>
    </div>
    <div class="hotspot-content">
      <div class="no-result-img" v-if="isShowTip">
        <img src="../../../assets/images/hotspotSearch/hotspot-nodata.png" alt />
        <p style="textAlign: center; fontSize: 16px; color:#AAAAAA">热点检索</p>
      </div>
      <div v-else>
        <span style="fontSize: 14px; color: #767676;">为你找到30条结果</span>
        <newList :newsList="newsList"></newList>
      </div>
    </div>
    <HigherSearchForm
      :popoverVisible="visible"
      @visibleChange="handleVisibleChange"
      @searchFormData="getSearchFormData"
    ></HigherSearchForm>
  </div>
</template>

<script>
import newList from "components/base/newList";
import HigherSearchForm from "components/configuration/hotspotSearch/higherSearchForm";
export default {
  components: {
    newList,
    HigherSearchForm,
  },
  data() {
    return {
      searchType: 0,
      visible: false,
      open: false,
      focus: false,
      newsList: [
        {
          id: 1,
          isclick: true,
          title:
            "德国孔院举办中医抗新冠疫情线上研讨会|疫情|新冠肺炎德国孔院举办中医抗新冠疫情",
          pubdate: "2020-07-30 08:10:56",
          sitename: "新华网",
          source: "中国共产党新闻网",
          imgs:
            "https://p9.pstatp.com/list/190x124/pgc-image/d6edc92abc3a4a68a91a8427af94c0a1",
          content:
            "1小时前 - 新华社柏林5月11日电(记者张毅荣)德国施特拉尔松德孔子学院日前联合汉堡大学附属埃彭多夫医院汉萨美安中医中心,共同组织举办了数场中医抗击新。施特拉尔松德孔子学院日前联合汉堡大学附属埃彭多夫施特拉尔松",
        },
        {
          id: 2,
          title:
            "德国孔院举办中医抗新冠疫情线上研讨会|疫情|新冠肺炎德国孔院举办中医抗新冠疫情",
          pubdate: "2020-07-30 08:10:56",
          sitename: "新华网",
          source: "中国共产党新闻网",
          imgs:
            "https://p9.pstatp.com/list/190x124/pgc-image/d6edc92abc3a4a68a91a8427af94c0a1",
          content:
            "1小时前 - 新华社柏林5月11日电(记者张毅荣)德国施特拉尔松德孔子学院日前联合汉堡大学附属埃彭多夫医院汉萨美安中医中心,共同组织举办了数场中医抗击新。施特拉尔松德孔子学院日前联合汉堡大学附属埃彭多夫施特拉尔松",
        },
        {
          id: 3,
          title:
            "德国孔院举办中医抗新冠疫情线上研讨会|疫情|新冠肺炎德国孔院举办中医抗新冠疫情",
          pubdate: "2020-07-30 08:10:56",
          sitename: "新华网",
          source: "中国共产党新闻网",
          imgs:
            "https://p9.pstatp.com/list/190x124/pgc-image/d6edc92abc3a4a68a91a8427af94c0a1",
          content:
            "1小时前 - 新华社柏林5月11日电(记者张毅荣)德国施特拉尔松德孔子学院日前联合汉堡大学附属埃彭多夫医院汉萨美安中医中心,共同组织举办了数场中医抗击新。施特拉尔松德孔子学院日前联合汉堡大学附属埃彭多夫施特拉尔松",
        },
      ],
      dataSource: [],
      resultList: [], //真正展示的数据，也就是筛选后的数据
      keyword: "", //与输入框绑定的变量
      isShowTip: true, //当搜索不到数据时为true
      searchFormParam: {},
    };
  },
  methods: {
    handleFocus() {
      this.focus = true;
      if (this.keyword !== "") {
        this.open = true;
      }
    },
    handleBlur() {
      this.focus = false;
      this.open = false;
    },
    showPopover() {
      this.visible = true;
    },
    //集合change事件
    handleChange(type, value) {
      if (type == "select") {
        //搜索类型（select）下拉框change事件
        if (value == 1) {
          // this.visible = true;
        } else {
          // this.visible = false;
        }
      }
    },
    searchEvent(e) {
      // console.log(e);
    },
    //热点搜索：用户可直接点击下拉框内容进行搜索
    onSelect($event) {
      console.log("event:", $event);
      this.keyword = $event.currentTarget.innerText;
      this.open = false;
      this.isShowTip = false;
      //触发搜索按钮
      this.onSearch();
    },
    getDeviceList(value) {
      //请求获取输入的搜索内容的联想词
      // this.$axios
      //   .get("../../../static/mock/device.json")
      //   .then((res) => {
      //     //将json文件中的数据赋值给data里面的deviceList
      //     this.dataSource = res.data.data.deviceList;
      //   })
      //   .then(() => {
      //     //把上面search写的代码放在这里面
      //   });
      this.dataSource = [
        {
          title: "新冠疫情治疗方案",
        },
        {
          title: "全球疫情状况",
        },
        {
          title: "新冠型肺炎病毒",
        },
        {
          title: "哈哈哈哈",
        },
        {
          title: "呵呵呵呵",
        },
      ];
    },
    //输入框搜索匹配
    inputSearch(value) {
      this.keyword = value;
      if (this.keyword !== "") {
        this.open = true;
        this.focus = true;
      } else {
        this.open = false;
      }
      this.getDeviceList(value);
      this.resultList = [];
      this.dataSource.forEach((item) => {
        if (item.title.indexOf(this.keyword) > -1) {
          this.resultList.push(item);
        }
      });
      if (this.resultList.length == 0) {
        //如果没有匹配结果，就显示提示信息
        this.isShowTip = true;
      }
      this.resultList.map((item) => {
        item.title = this.brightKeyword(item.title);
      });
    },
    //热点搜索：搜索按钮触发
    onSearch() {
      let tipFlag = true;
      console.log("点击了搜索按钮:", this.searchType);
      console.log("筛选条件：", this.searchFormParam);
      for (let key in this.searchFormParam) {
        // console.log("item:",this.searchFormParam[key]);
        let type = this.searchFormParam[key].constructor;
        if(type == Array){
          if(this.searchFormParam[key].length > 0){
            tipFlag = false;
          }
        } else if(type == String){
          if(this.searchFormParam[key] !== "") {
            tipFlag = false;
          }
        } else if(type == Boolean){
          if(this.searchFormParam[key]){
            tipFlag = false;
          }
        }
        console.log("type:", type);
      }
      if (this.keyword == "") {
        this.$message.warning("请输入要搜索的内容");
        return;
      } else {
        this.isShowTip = false;
      }
    },
    //获取高级检索筛选条件
    getSearchFormData(param) {
      this.searchFormParam = param;
    },
    //搜索关键词设置高亮
    brightKeyword(val) {
      let keyword = this.keyword; //获取输入框输入的内容
      if (val.indexOf(keyword) !== -1) {
        //判断这个字段中是否包含keyword
        //如果包含的话，就把这个字段中的那一部分进行替换成html字符
        console.log("val:", val);
        return val.replace(keyword, `<font color='#ff5134'>${keyword}</font>`);
      } else {
        return val;
      }
    },
    //高级搜索表单是否显示事件
    handleVisibleChange() {
      this.visible = !this.visible;
    },
  },
};
</script>
<style>
.global-search-wrapper {
  width: 470px;
}

.global-search {
  width: 100%;
}

.global-search.ant-select-auto-complete .ant-select-selection--single {
  margin-right: -110px;
  height: 56px;
}

.global-search.ant-select-auto-complete
  .ant-input-affix-wrapper
  .ant-input:not(:last-child) {
  height: 56px;
  width: 470px;
  font-size: 18px;
  margin: 0 0 !important;
  border: 2px solid transparent;
  padding-left: 14px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
}

.global-search.ant-select-auto-complete
  .ant-input-affix-wrapper
  .ant-input:focus-within {
  box-shadow: none;
  border-right-color: #2d77f7;
  border-left-color: #2d77f7;
  border-top-color: #2d77f7;
  border-bottom-color: #2d77f7;
  /* border-bottom-left-radius: 0px; */
}

.global-search.ant-select-auto-complete
  .ant-input-affix-wrapper
  .ant-input-suffix
  button {
  width: 110px;
  height: 56px;
  font-size: 20px;
  background: #2d77f7;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.ant-input-affix-wrapper .ant-input-suffix {
  right: 14px;
}
.global-search-dropdown .ant-select-dropdown-menu {
  min-height: 150px;
  border-top: 1px solid #ececec;
  font-size: 20px;
  margin: 0px 14px;
}
.global-search-dropdown .ant-select-dropdown-menu-item-group-title {
  padding: 0px;
}
.ant-select-dropdown-menu-item-group-list > .ant-select-dropdown-menu-item {
  padding: 5px 0px;
}
.global-search-dropdown.ant-select-dropdown {
  border-left: 2px solid #2d77f7;
  border-right: 2px solid #2d77f7;
  border-bottom: 2px solid #2d77f7;
  border-top-right-radius: 0px;
  border-top-left-radius: 0px;
  box-shadow: none;
  top: 168px !important;
  border-top-color: transparent;
}
</style>
<style lang="stylus" scoped>
.hotspot-search
  width 100%
.hotspot-header
  margin-top 38px
  margin-left 130px
  margin-right 246px
  display flex
  align-items center
  .header-title
    height 34px
  .header-select
    margin-left 50px
    text-align center
.hotspot-content
  min-height 784px
  background #fff
  margin-top 38px
  padding 20px
  position relative
  border-radius 4px
  box-shadow 0px 0px 18px 0px rgba(223, 224, 231, 0.54)
  .no-result-img
    position absolute
    top 50%
    left 50%
    transform translate(-50%, -50%)
.global-search-wrapper
  width 580px
  height 56px
  border 2px solid #ffffff
  border-top-left-radius 4px
  border-bottom-left-radius 4px
  background #fff
  position relative
  padding 0px 12px
  .input-search
    height 100%
    width 100%
    font-size 18px
    border 0px
    border-radius 0px
  .input-select
    width 480px
    max-height 300px
    background #ffffff
    position absolute
    z-index 1000
    top 54px
    left -2px
    border 2px solid #1678FD
    box-sizing border-box
    border-bottom-left-radius 4px
    border-bottom-right-radius 4px
    border-top 0px
    padding 0px 0px 12px 0px
    .list-item
      border 0px
      padding 10px 0px 0px 0px
      font-size 18px
      cursor pointer
.focus-search-wrapper
  border-color #1678fd
.open-search-wrapper
  border-color #1678fd
  border-bottom 0px
  border-bottom-left-radius 0px
.search-btn
  width 110px
  height 56px
  border-top-left-radius 0px
  border-bottom-left-radius 0px
  font-size 20px
  background #2899FC
  box-shadow 0px 6px 18px 0px rgba(70, 186, 246, 0.38)
</style>